<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
import { OrdersModel } from '../assets/model/Orders';
import { userInfoStore } from '../assets/userStore/userStore';
import { finishOrder, transitOrder } from '../assets/net/NetUtils';

const userStore = userInfoStore();
const transitList = ref<Array<OrdersModel>>()

onMounted(() => {
    transitOrder(userStore.uid)
        .then((value) => {
            transitList.value = value.data as Array<OrdersModel>
        })
})
const date: Date = new Date()
const activities = [
    {
        content: '商品出库中',
        timestamp: '',
    },
    {
        content: '运输中',
        timestamp: `${date.getFullYear()}-${date.getMonth()}-${date.getDay()}` + ' ' + `${date.getHours()}:${date.getMinutes()}`,
    }
]

const receive = (oid: number) => {
    finishOrder(oid)
        .then((value) => {
            if (value.code === 200) {
                ElMessage.success(value.data)
                transitOrder(userStore.uid)
                    .then((value) => {
                        transitList.value = value.data as Array<OrdersModel>
                    })
            } else {
                ElMessage.error(value.data)
            }
        })
}

</script>

<template>
    <el-scrollbar height="100%" style="overflow-y: hidden;width: 100%;">
        <el-row style="width: 100%;" justify="center" align="middle">
            <el-col :span="24"><el-text style="font-size: large;">运输中</el-text></el-col>
            <el-col :span="24" style="margin-top: 1%;">
                <div v-for="item in transitList" :key="item.oid">
                    <el-collapse>
                        <el-collapse-item :title="`订单编号：${item.oid}······${item.commodity?.commodityName}`" name="1">
                            <el-row style="width: 100%;">
                                <el-col :span="24">
                                    <el-row justify="end" style="width: 100%;">
                                        <el-tag type="warning">状态：运输中</el-tag>
                                    </el-row>
                                </el-col>
                                <el-col :span="24">
                                    <el-timeline style="max-width: 600px">
                                        <el-timeline-item v-for="(activity, index) in activities" :key="index"
                                            :timestamp="activity.timestamp">
                                            {{ activity.content }}
                                        </el-timeline-item>
                                    </el-timeline>
                                </el-col>
                                <el-col :span="24">
                                    <el-row justify="end" style="width: 100%;">
                                        <el-button type="danger" plain @click="receive(item.oid!)">手动签收</el-button>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-col>
        </el-row>
    </el-scrollbar>
</template>